<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
        <link href="assets/css/codemirror.css" rel="stylesheet"/>
        <link rel="stylesheet" href="font/css/font-awesome.min.css" />
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
		<script src="assets/js/ace-extra.min.js"></script>
		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
        		<!--[if !IE]> -->
		<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>       
		<!-- <![endif]-->
        <script src="assets/dist/echarts.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="<%=basePath %>/admin/assets/laydate/laydate.js" type="text/javascript"></script>
<title>统计</title>
</head>

<body>
<div class=" page-content clearfix">
  <form method="post" action="userList_lsQuery.do" >
    <div class="search_style">
      <ul class="search_content clearfix">
       <li>
       <!--  <li><label class="l_f"></label><input type="text" class="inline laydate-icon" id="start"  name="stime" placeholder="请选择开始的时间" /></li>
        <li><label class="l_f"></label><input type="text" class="inline laydate-icon" id="end"  name="stime" placeholder="请选择结束的时间" /></li>
         --><li><label class="l_f">请选择培训师</label>
         <select name="id" id="cid">
			     <option value="">请选择培训师</option>
			     <c:forEach items="${tlist }" var="c">
			     <option value="${c.id }">${c.tname }</option>
			     </c:forEach></select></li>
     <!--  <li><label class="l_f"></label><select name="mark" id="mark">
     <option value=""></option>
     <option value=""></option>
     </select></li> -->
       <li style="width:90px;"><button type="button" class="btn_search" onclick="tj()"><i class="icon-search"></i>查询</button></li>
      </ul>
    </div>
    </form>
 <div class="transaction_style">
  
 </div>
 <div class="t_Record" >
               <div id="main" style="height:400px; overflow:hidden; width:100%; overflow:auto"  ></div>     
              </div> 
</div>

<script type="text/javascript">
 
     var arry =null; 
     var scope1 =null; 
     var scope2 =null; 
 	var arry2 =null; 
     function tj() {
         var cid=$("#cid").val();
  		//var start = $("#start").val();
  		//var end=$("#end").val();
  		//var mark=$("#mark").val();
  		if (cid ==""||end=="") {
  			alert("培训师不能为空！");
  		} else {
  			$.ajax({
  				url : "tj_term_ben.do",
  				type : "post",
  				data :"id="+ cid,
  				dataType : "json",
  				success:function(result){
  					//alert(result.xmlstr);
  					//alert(result.stu);
  		   			//alert(result.account);
  					arry = result.name;
  					scope1 = result.scope1;
  					scope2 = result.scope2;
  					arry2 = result.account;
  					
  					 require(
  				            [
  				                'echarts',
  								'echarts/theme/macarons',
  				                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
  				                'echarts/chart/bar'
  				            ],
  				            function (ec,theme) {
  				                var myChart = ec.init(document.getElementById('main'),theme);
  				                
  				               option = {
  				    title : {
  				        text: '本学年评价得分统计',
  				        subtext: '本学年评价得分和职员实验课成绩得分和教师自我评价得分作对比（职员每一节课后给培训师打得分）'
  				    },
  				    tooltip : {
  				        trigger: 'axis'
  				    },
  				    legend: {
  				    	data:	arry
  				    },
  				    toolbox: {
  				        show : true,
  				        feature : {
  				            mark : {show: true},
  				            dataView : {show: true, readOnly: false},
  				            magicType : {show: true, type: ['line', 'bar']},
  				            restore : {show: true},
  				            saveAsImage : {show: true}
  				        }
  				    },
  				    calculable : true,
  				    xAxis : [
  				        {
  				            type : 'category',
  				            data : arry
  				        }
  				    ],
  				    yAxis : [
  				        {
  				            type : 'value'
  				        }
  				    ],
  				    series : [
  				        {
  				            name:['职员实验培训课成绩得分'],
  				            type:'bar',
  				            data:scope1,
  				            markPoint : {
  				                data : [
  				                    {type : 'max', name: '最大值'},
  				                    {type : 'min', name: '最小值'}
  				                ]
  				            }           
  				        } ,
  				        {
  				            name:['本学年评价得分'],
  				            type:'bar',
  				            data:scope2,
  				            markPoint : {
  				                data : [
  				                ]
  				            },
  				           
  							
  				        }
  						, {
  				            name:['教师自我评价得分'],
  				            type:'bar',
  				            data:arry2,
  				            markPoint : {
  				                data : [
  				                ]
  				            },
  				           
  						}
  				    ]
  				};
  				                    
  				                myChart.setOption(option);
  				            }
  				        );
  				},
  				error:function(){
  				alert("error");
  				}

  			})
  		}

  	}
     
     
     
     
     
      $(document).ready(function(){ 
		 
		  $(".t_Record").width($(window).width()-60);
		  //当文档窗口发生改变时 触发  
  		  $(window).resize(function(){
		 $(".t_Record").width($(window).width()-60);
		}); 
		 /*  $(".btn_search").click(function(){
				 $(".t_Record").width($(window).width()-60);
				});  */
});
     
        require.config({
            paths: {
                echarts: './assets/dist'
            }
        });
        require(
            [
                'echarts',
				'echarts/theme/macarons',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec,theme) {
                var myChart = ec.init(document.getElementById('main'),theme);
                
               option = {
    title : {
        text: '统计',
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : arry
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'收入',
            type:'bar',
            data:arry2,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            }           
        } ,
        {
            name:'支出',
            type:'bar',
            data:[26, 59, 30, 84, 27, 77, 176, 1182, 487, 188, 60, 23],
            markPoint : {
                data : [
                    {name : '年最高', value : 1182, xAxis: 7, yAxis: 1182, symbolSize:18},
                    {name : '年最低', value : 23, xAxis: 11, yAxis: 3}
                ]
            },
           
			
        }
    ]
};
                    
                myChart.setOption(option);
            }
        );
        
        
        
        
        /**日期选择**/
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD',
           // min: laydate.now(), //设定最小日期为当前日期
            min:'1900-01-01',
            max: '2099-06-16', //最大日期
            istime: true,
            istoday: false,
             choose: function(datas){
                 end.min = datas; //开始日选好后，重置结束日的最小日期
                 end.start = datas //将结束日的初始值设定为开始日
            } 
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD',
            min: laydate.now(),
            max: '2099-06-16 ',
            istime: true,
            istoday: false,
            choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>
</body>
</html>
 